<template>
  <view class="burst-wrap">
    <view class="burst-wrap-bg">
      <view>
        <!-- 信息提交 -->
        <view class="burst-info">
          <view class="uni-uploader-body">
            <view class="uni-uploader__files">
              <!-- 图片 -->
              <block v-for="(item, index) in imageList" :key="index">
                <view class="uni-uploader__file">
                  <u-icon
                    name="close-circle"
                    size="25"
                    class="icon-close"
                    @click.native="delect(index)"
                  ></u-icon>
                  <image
                    class="uni-uploader__img"
                    :src="item.fileUrl"
                    :data-src="item.fileUrl"
                    @click.native="previewImage"
                    v-if="item.fileName.includes('.png') ||
					item.fileName.includes('.jpg') ||
					item.fileName.includes('.jpeg')
                    "
                  ></image>
                  <video v-else :src="item.fileUrl" class="video"></video>
                </view>
              </block>
              <!-- 视频 -->
              <view class="uni-uploader__file" v-if="src">
                <view class="uploader_video">
                  <view
                    class="icon iconfont icon-cuo"
                    @tap="delectVideo"
                  ></view>
                  <video :src="src" class="video"></video>
                </view>
              </view>
              <view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
                <u-icon name="plus"></u-icon>
                <view
                  class="uni-uploader__input"
                  @click.native="chooseVideoImage"
                ></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var sourceType = [["camera"], ["album"], ["camera", "album"]];
import { baseUrl } from "@/utils/url";
export default {
	props: {
		value: {
			type: Array,
			default: () => [],
		},
	},
	watch: {
		value: {
			immediate: true,
			handler(val, old) {
				this.$set(this,'imageList',val)
				// this.imageList = val;
			},
		},
	},
  data() {
    return {
      imageList: [], //图片
      show: false,
      src: "", //视频存放
      sourceTypeIndex: 2,
      checkedValue: true,
      checkedIndex: 0,
      sourceType: ["拍摄", "相册", "拍摄或相册"],
      cameraList: [
        {
          value: "back",
          name: "后置摄像头",
          checked: "true",
        },
        {
          value: "front",
          name: "前置摄像头",
        },
      ],
      config: {
        fileUrl: baseUrl + "/fileServer/upload",
      },
      cameraIndex: 0,
      VideoOfImagesShow: true,
    };
  },
  onUnload() {
    (this.src = ""),
      (this.sourceTypeIndex = 2),
      (this.sourceType = ["拍摄", "相册", "拍摄或相册"]);
  },
  methods: {
    chooseVideoImage() {
      uni.showActionSheet({
        title: "选择上传类型",
        itemList: ["图片", "视频"],
        success: (res) => {
          console.log(res);
          if (res.tapIndex == 0) {
            this.chooseImages();
          } else {
            this.chooseVideo();
          }
        },
      });
    },
    chooseImages() {
      // 上传图片
      uni.chooseImage({
        count: 4, //默认9
        // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: (res) => {
          let igmFile = res.tempFilePaths;
          console.log("igmFile[0]-------------", igmFile[0]);
          uni.uploadFile({
            url: baseUrl + "/fileServer/upload",
            filePath: igmFile[0],
            name: "file",
            formData: {
              dir: "",
            },
            success: (res) => {
              const data = JSON.parse(res.data);
              this.imageList.push(data.data);
              console.log("res.data", this.imageList);
              this.$emit("input", this.imageList);
              // this.$emit("change", this.imageList);
            },
          });
        },
      });
    },
    chooseVideo() {
      // 上传视频
      uni.chooseVideo({
        count: 1,
        sourceType: ["album"],
        success: (responent) => {
          let videoFile = responent.tempFilePath;
          console.log("videoFile[0]-------------", videoFile);
          uni.uploadFile({
            url: baseUrl + "/fileServer/upload",
            filePath: videoFile,
            name: "file",
            formData: {
              dir: "",
            },
            success: (res) => {
              const data = JSON.parse(res.data);
              this.imageList.push(data.data);
			  console.log(this.imageList,'this.imageList')
              this.$emit("input", this.imageList);
              // this.$emit("change", this.imageList);
            },
          });
        },
        complete: (responent) => {
          console.log("responent", responent);
        },
        fail: (responent) => {
          console.log("responent", responent);
        },
      });
    },
    previewImage: function (e) {
      //预览图片
      var current = e.target.dataset.src;
      uni.previewImage({
        current: current,
        urls: this.imageList,
      });
    },
    delect(index) {
      const suffix = this.imageList[index].fileName.split('.')[1];
      uni.showModal({
        title: "提示",
        content:
          suffix == "png" || suffix == "jpg" || suffix == "jpeg"
            ? "是否要删除该图片"
            : "是否要删除该视频",
        success: (res) => {
          if (res.confirm) {
            this.imageList.splice(index, 1);
			console.log(this.imageList,'this.imageList')
            // this.$emit("input", this.imageList);
            // this.$emit("change", this.imageList);
          }
        },
      });
    },
  },
};
</script>

<style>
.burst-wrap {
  width: 100%;
  height: 100%;
}
.uni-uploader__input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background-color: #f4f5f7;
  border-radius: 2px;
  box-sizing: border-box;
}
.form-item {
  width: 100%;
}
.form-item textarea {
  display: block;
  height: 220upx;
  width: 100%;
  color: #aaaaaa;
  font-size: 28upx;
}
.uni-uploader__file,
.uploader_video {
  position: relative;
  z-index: 1;
  width: 200upx;
  height: 200upx;
}
.uni-uploader__img {
  width: 200upx;
  height: 200upx;
}
.icon-close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 999;
}
.video {
  width: 100%;
  height: 100%;
}

.login-input-box {
  position: relative;
  border-bottom: 1upx solid #eeeeee;
}
.login-input-box .forget,
.login-input-box .phone {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 100;
}
.login-input-box .phone {
  width: 100upx;
  left: 0;
  color: #666666;
  font-weight: bold;
}
.login-input-box .phone-input {
  padding-left: 100upx;
}
.address-wrap,
.open-info {
  margin-top: 20upx;
}
.open-info > view:last-child {
  font-size: 28upx;
  color: #999999;
}
.address-wrap .address {
  background: #f2f2f2;
  border-radius: 40upx;
  padding: 0 20upx;
}
.user-set-btn {
  margin: 40upx;
  background: linear-gradient(
    90deg,
    rgba(251, 91, 80, 1) 0%,
    rgba(240, 45, 51, 1) 100%
  );
  color: #ffffff;
  text-align: center;
  height: 88upx;
  line-height: 88upx;
}
.uni-uploader__files {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  .icon {
    width: 20px;
    height: 20px;
  }
}
.uni-uploader__file {
  width: 80px;
  height: 80px;
  position: relative;
  margin-right: 20px;
  .uni-uploader__img {
    width: 100%;
    height: 100%;
  }
}
</style>
